<template>
    <view class="page">
        <view style="padding: 25rpx;">
            <view class="ni">
                <view class="ni_cell" style="min-height: 120rpx;">
                    头像：
                    <view style="display: flex;justify-content: right;align-items: center;">
                        <image @tap='uploadImage' :src="user.avatar" style="width: 100rpx;height: 100rpx;border-radius: 60rpx;"></image>
                        <uni-icons type="arrowright" color="#666"></uni-icons>
                    </view>
                </view>
            </view>
            <view class="ni">
                
                <view class="ni_cell">
                    <view>账号：</view>
                    <view style="color: #666;">
                        {{user.name}}
                        <uni-icons type="arrowright" color="#666"></uni-icons>
                    </view>
                </view>
                <view class="ni_cell">
                    <view>昵称：</view>
                    <view style="color: #666;display: flex;justify-content: right;align-items: center;">
                        <input type="text" style="border-bottom: none;font-size: 28rpx; text-align: right;" class="input1" id="nickname"
                            v-model="nickname" placeholder="请输入" maxlength="7" />
                        <uni-icons type="arrowright" color="#666"></uni-icons>
                    </view>
                </view>
                <view class="ni_cell">
                    <view>性别：</view>
                    <view style="color: #666;display: flex;justify-content: right;align-items: center;">
                       <picker @change="bindPickerChange" :value="user.sex" :range="sex" style="width: 100$;">
                           <view style="text-align: right;margin-right: 29rpx;" class="uni-input" v-if="user.sex">
                               {{sex[user.sex]}}</view>
                           <view style="text-align: right;margin-right: 29rpx;" class="uni-input" v-else>保密</view>
                       </picker>
                       <uni-icons type="arrowright" color="#666"></uni-icons>
                    </view>
                </view>
                <view class="ni_cell">
                    <view>ID：</view>
                    <view style="color: #666;">
                        {{user.id}}
                        <uni-icons type="arrowright" color="#666"></uni-icons>
                    </view>
                </view>
                <view class="ni_cell">
                    <view>身份证号：</view>
                    <view style="color: #666;">
                        {{user.isCard}}
                        <uni-icons type="arrowright" color="#666"></uni-icons>
                    </view>
                </view>
                <view class="ni_cell">
                    <view>所在地：</view>
                    <view style="color: #666;display: flex;justify-content: right;align-items: center;">
                        <picker mode="multiSelector" @cancel="oncancel()" @columnchange="bindMultiPickerColumnChange"
                            :value="multiIndex" :range="area">
                            <view style="text-align: right;margin-right: 29rpx;" class="uni-input" @tap="tapaddress();">
                                {{user.province}}-{{user.city}}</view>
                        </picker>
                        <uni-icons type="arrowright" color="#666"></uni-icons>
                    </view>
                </view>
                <view class="ni_cell" style="min-height: 190rpx;">
                    <view style="width: 190rpx;">个人介绍：</view>
                    <view >
                        <textarea v-model="user.sign" placeholder="填写个人介绍" style="border-radius: 10rpx; padding: 20rpx; border: 1rpx solid #e7e7e7; height: 100rpx; font-size: 12px; width: 460rpx;"></textarea>
                    </view>
                </view>
            </view>
        </view>
    
        <view style="margin:15px auto;display:block;width: 92%;">
            <button class="button1" @tap="submit">更新</button>

        </view>

    </view>
</template>

<script>
    import {
        mapState
    } from 'vuex';
    import api from "../../library/index.js"
    import cache from "../../library/cache.js"
    import helper from "../../library/helper.js"
    import config from "../../config.js"
    import http from "../../library/http.js"
    import address from '../../library/address.js'
    import uniIcons from '../../components/uni-icons/uni-icons.vue'

    export default {
        components: {
            uniIcons,


        },
        data() {
            return {
                user: uni.getStorageSync('userInfo'),
                sex: ['保密', '男', '女'],
                avatar: '',
                province: [],
                nickname: '',
                city: [],
                multiIndex: [0, 0],
                area: [
                    ['省份'],
                    ['城市']
                ],
                showarea: 0,
                provice1: '',
                city1: '',
                provice2: '',
                city2: '',
                c1: 0,
                c2: 0,

            }
        },
        methods: {
            uploadImage() {

                uni.chooseImage({
                    success: (chooseImageRes) => {
                        const tempFilePaths = chooseImageRes.tempFilePaths;
                        helper.uploadFiles(tempFilePaths, 'image', {
                            type: 'avatar'
                        }).then(res => {

                            this.user.avatar = res;
                            this.avatar = res.replace(config.imgUri, '');
                            var postdata = {
                                id: this.user.id,
                                avatar: this.avatar,
                            };
                            http.setWait(false).post('user.php?act=profile', postdata).then(res => {
                                this.user = res.data;

                                uni.setStorageSync('userInfo', this.user)



                            })
                        })
                    }
                });
            },
            submit() {

                if (this.nickname == '') {

                    uni.showToast({
                        icon: 'none',
                        title: '请输入昵称',
                        duration: 1000
                    })
                    return false;
                }
                if (this.nickname.length > 7) {
                    uni.showToast({
                        icon: 'none',
                        title: '昵称最多7个字符',
                        duration: 1000
                    })

                    return false;
                }
                // var nickname=this.nickname.replace(/-/g,"");
                // nickname=nickname.replace(/_/g,"");
                // nickname=nickname.replace(/\(/g,"");
                // nickname=nickname.replace(/\)/g,"");
                // nickname=nickname.replace(/\[/g,"");
                // nickname=nickname.replace(/\]/g,"");
                // nickname=nickname.replace(/ /g,"");
                // var reglx = /^[\u0391-\uFFE5A-Za-z]+$/;
                // if(!reglx.test(nickname)){
                //     uni.showToast({
                //        icon:'none',
                //        title:'昵称只能包含中文或者英文',
                //        duration:1000
                //     })

                //     return false;
                // }

                let data = {
                    id: this.user.id,
                    nickname: this.nickname,
                    sex: this.user.sex,
                    sign: this.user.sign,
                    idcard:"1546446"
                };

                http.setWait(true).post('user.php?act=profile', data).then(res => {
                    this.user = res.data;
                    this.userdata();
                    uni.showToast({
                        icon: 'none',
                        title: '资料已更新',
                        duration: 1000
                    })
                    setTimeout(function() {
                        var profileback = uni.getStorageSync('profileback');
                        if (profileback != undefined && profileback != null && profileback.length > 3) {
                            uni.setStorageSync('profileback', '')
                            uni.redirectTo({
                                url: profileback
                            })
                        }

                    }, 800)
                })

            },
            bindPickerChange(e) {
                this.user.sex = e.target.value
            },
            oncancel() {
                let data = {
                    id: this.user.id,
                    province: this.provice2,
                    city: this.city2,

                };

                api.changeProfile(data).then(res => {

                    uni.setStorageSync('userInfo', res.data);
                    this.user = res.data;
                    this.userdata();
                    //this.$store.state.userinfo=res.data;;


                })
            },
            tapaddress() {

                //  console.log( this.sex);

                //   console.log( this.area[0]);
                //     console.log( this.area[1]);
                this.provice2 = this.user.province;
                this.city2 = this.user.city;
            },
            bindMultiPickerColumnChange(e) {
                var detail = e.detail;
                detail.value = parseInt(detail.value);
                if (detail.column == 0) {
                    // console.log(this.city[detail.value].city);
                    this.c1 = detail.value;
                    this.area[1] = this.city[detail.value].city;
                    this.multiIndex[0] = detail.value;
                    this.provice1 = this.city[detail.value].province;
                    this.city1 = this.area[1][this.c2];

                } else {
                    this.c2 = detail.value;
                    this.multiIndex[1] = detail.value;
                    this.city1 = this.area[1][detail.value];

                }
                var postdata = {
                    id: this.user.id,
                    province: this.provice1,
                    city: this.city1,
                };
                http.setWait(false).post('user.php?act=profile', postdata).then(res => {
                    this.user = res.data;
                    this.userdata();



                })

            },
            getAddress() {
                if (!this.user.province || this.user.province == null) this.user.province = '省份';
                if (!this.user.city || this.user.city == null) this.user.city = '城市';
                var c1 = 0;

                address.forEach(item => {

                    this.province.push(item.provinceName);
                    //    console.log(this.user.province,item.provinceName);
                    if (this.user.province == item.provinceName) this.multiIndex[0] = parseInt(c1);
                    c1++;
                    var arr = {};
                    arr.province = item.provinceName;
                    var city1 = [];
                    var c2 = 0;
                    item.city.forEach(c => {
                        if (c.cityName != '')
                            city1.push(c.cityName)
                        if (this.user.province == item.provinceName && this.user.city == c.cityName)
                            this.multiIndex[1] = parseInt(c2);

                        c2++;
                    })
                    arr.city = city1;
                    this.city.push(arr)

                })
                //  console.log(this.province);
                // this.area=[];

                this.area[0] = this.province;
                this.area[1] = this.city[this.multiIndex[0]].city;
                this.showarea = 1;
            },

            userdata() {
                if (this.user.issetname == 1) this.nickname = this.user.nickname;
                else this.nickname = "";
                if (this.user.signature == null) {
                    this.user.signature = ''
                }
                uni.setStorageSync('userInfo', this.user)
            },
            getuserinfo() {

                var postdata = {
                    id: uni.getStorageSync('access_token')
                };
                http.setWait(false).post('user.php?act=userinfo', postdata).then(res => {
                    this.user = res.data;
                    this.userdata();
                    this.getAddress();
                })
            },
        },
        onLoad() {
            this.user = cache.storage('userInfo');
            this.userdata();
            this.getAddress();
            this.getuserinfo();
        }
    }
</script>
<style lang="scss" scoped>
    @import "@/static/css/user.css";

    .page {
        background-color: #e5e5e5;
        min-height: 100vh;
    }

    .profile {
        background-color: #fff;
        // margin: 10px auto;
        width: 100%;
        position: relative;
		border-bottom: 1px solid #eee;
    }

    .profile li {
        vertical-align: middle;
    }

    .profile li:nth-child(2) {
        width: calc(100% - 100px);
    }

    .profile .avatar {
        height: 50px;
        width: 50px;
        border-radius: 5px;
        vertical-align: middle;
    }

    .profile .next {
        position: absolute;
        right: 10px;
        top: 0px;
        color: #666 !important;
        font-size: 16px !important;

    }
</style>